import React, { Component } from "react";
import CurrentCity from "./CurrentCity/CurrentCity";

import HotCity from "./HotCity/HotCity";

import Header from "../../components/Header/Header";

import { connect } from "react-redux";
class City extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  changeCityHandler = (city) => {
    console.log(city);
    this.props.updateCity(city, () => {
      alert("更新数据完成");
    });
    window.localStorage.setItem("cityName", city);
    this.props.history.push("/");
  };
  render() {
    return (
      <div>
        <Header />
        <CurrentCity city={this.props.city} />
        <HotCity changeCity={this.changeCityHandler} />
      </div>
    );
  }
}

function mapStateToProps(state, props) {
  console.log(state);
  return {
    ...state,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    updateCity: (cityName, callback) =>
      dispatch(
        {
          type: "update_city",
          city: cityName,
        },
        callback && callback()
      ),
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(City);
